import React, { Component } from 'react'
import {Table, Button, Layout, Dialog, Input, Form, Message} from 'element-react'
import {withRouter} from 'react-router-dom'
import Breadcrumb from '../base/Breadcrumb'
import Pagination from '../base/Pagination'
import Select from '../base/Select'
import {SearchPanel} from '../base/BaseStatic'

class returnReasonList extends Component {
  constructor (props) {
    super(props)
    this.state = {
      // 表格数据
      columns: [
        { label: '申请类型', prop: 'applyType' },
        { label: '状态', prop: 'status' },
        { label: '操作', prop: 'operate', width: 135, render: () => {
          return (
            <Button type="primary" style={{width:'100%'}} onClick={this.edit.bind(this)}>编辑</Button>
          )
        } }
      ],
      tableData: [/* 
        { applyType: '245', status: '32355第二方' },
        { applyType: '245', status: '32355第三方' }
       */],
      // 申请类型选项
      applyTypeOptions: [
        {
          value: 'return_money',
          label: '仅退款'
        },
        {
          value: 'return_good_and_money',
          label: '退货退款'
        },
        {
          value: 'exchange_good',
          label: '换货'
        }
      ],
      // 状态选项
      statusOptions: [
        {
          value: 0,
          label: '有效'
        },
        {
          value: 1,
          label: '无效'
        }
      ],
      applyType: null, // 申请类型
      status: null, // 状态
      dialogVisible: false, // 对话框是否显示
      dialogForm: { reasonId: null, status: null, applyType: null, content: null }, // 对话框信息
      total: 50, // 总页数
      increaseOrNot: false, // 是否新增原因
    }
  }
  render () {
    return (
      <div>
        <Breadcrumb data={['售后', '退换货原因管理']}/>
        {/* 搜索面板 */}
        <SearchPanel>
          <Layout.Row>
            <Layout.Col span="3" className="text"><div>申请类型：</div></Layout.Col>
            <Layout.Col span="5"><Select options={this.state.applyTypeOptions} select={this.getApplyType.bind(this)}/></Layout.Col>
            <Layout.Col span="3" className="text"><div>状态：</div></Layout.Col>
            <Layout.Col span="13"><Select options={this.state.statusOptions} select={this.getStatus.bind(this)}/></Layout.Col>
          </Layout.Row>
          <Button type="primary" onClick={this.search.bind(this)} >搜索</Button>
        </SearchPanel>
        {/* 新增 */}
        <Button type="primary" style={{marginBottom:'20px'}} onClick={this.increase.bind(this)}>新增</Button>
        {/* 表格 */}
        <Table
          style={{width: '100%'}}
          columns={this.state.columns}
          data={this.state.tableData}
          border={true}
          highlightCurrentRow={true}
          onCurrentChange={this.handleCurrentChange.bind(this)}
        />
        {/* 分页 */}
        {/* <Pagination total={this.state.total} changePage={this.changePage.bind(this)}/> */}
        {/* 确认认领对话框 */}
        <Dialog
          title="操作"
          visible={ this.state.dialogVisible }
          onCancel={ () => this.setState({ dialogVisible: false }) }
          >
          <Dialog.Body>
            <Form model={this.state.dialogForm}>
              <Form.Item label="申请类型" labelWidth="80"><Select value={this.state.dialogForm.applyType} options={this.state.applyTypeOptions} select={this.getDialogApplyType.bind(this)}/></Form.Item>
              <Form.Item label="内容" labelWidth="80"><Input value={this.state.dialogForm.content}  onChange={this.getDialogContent.bind(this)}></Input></Form.Item>
            </Form>
          </Dialog.Body>
          <Dialog.Footer className="dialog-footer">
            <Button onClick={ () => this.setState({ dialogVisible: false }) }>取 消</Button>
            <Button type="primary" onClick={this.submit.bind(this)}>确 定</Button>
          </Dialog.Footer>
        </Dialog>
      </div>
    )
  }
  // 初始化页面列表
  init (page) {
    this.$ajax.findReason({}).then(res => {
      if (res.code === 200) {
        let arr = []
        res.data.forEach((item, index) => {
          arr.push({
            reasonId: item.id,
            applyTypeId: item.describe,
            statusId: item.status,
            applyType: item.describe === 'return_money' ? '仅退款' : item.describe === 'return_good_and_money' ? '退货退款' : item.describe === 'exchange_good' ? '换货' : '-',
            status: item.status === 0 ? '无效' : item.status === 1 ? '有效' : '-'
          })
        })
        this.setState({ tableData: arr })
      } else {
        Message.error('加载列表失败')
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  // 搜索回调
  search () { console.log('search') }
  // 新增回调
  increase () {
    this.setState({ dialogVisible: true })
    this.state.increaseOrNot = true
  }
  // 编辑回调
  edit () {
    this.setState({ dialogVisible: true })
    this.state.increaseOrNot = false
  }
  // 提交回调
  submit () {
    if (this.state.increaseOrNot) {
      // 新增退货原因
      this.$ajax.increaseReason({
        afterSellDescribe: this.state.dialogForm.applyType,
        afterSellReason: this.state.dialogForm.content }).then(res => {
        if (res.code === 200) {
          Message({
            type: 'success',
            message: '新增成功!'
          })
          this.init()
          this.setState({ dialogForm: Object.assign({}, this.state.dialogForm, { reasonId: null, status: null, applyType: null, content: null }) })
          this.setState({ dialogVisible: false })
        } else {
          this.setState({ dialogVisible: false })
          Message.error('新增失败')
        }
      }).catch(() => {
        this.setState({ dialogVisible: false })
        Message.error('网络错误')
      })
    } else {
      // 修改退货原因
      this.$ajax.EditReason({
        reasonId: this.state.dialogForm.reasonId,
        status: this.state.dialogForm.status,
        afterSellDescribe: this.state.dialogForm.applyType,
        afterSellReason: this.state.dialogForm.content }).then(res => {
        if (res.code === 200) {
          Message({
            type: 'success',
            message: '修改成功!'
          })
          this.init()
          this.setState({ dialogVisible: false })
        } else {
          this.setState({ dialogVisible: false })
          Message.error('修改失败')
        }
      }).catch(() => {
        this.setState({ dialogVisible: false })
        Message.error('网络错误')
      })
    }
  }
  // 表格中按钮操作回调
  handleCurrentChange (item) {
    this.setState({ dialogForm: Object.assign({}, this.state.dialogForm, {
      reasonId: item.reasonId,
      status: item.statusId
    }) })
  }
  // 换页
  changePage () { console.log('changePage') }

  // 申请类型的getter
  getApplyType (val) { this.setState({ applyType: val }) }
  // 状态的getter
  getStatus (val) { this.setState({ status: val }) }
  // 对话框中申请类型的getter
  getDialogApplyType (val) { this.setState({ dialogForm: Object.assign({}, this.state.dialogForm, {applyType: val}) }) }
  // 对话框中内容的getter
  getDialogContent (val) { this.setState({ dialogForm: Object.assign({}, this.state.dialogForm, {content: val}) }) }

  // 钩子函数
  componentDidMount () {
    this.init()
  }
}
export default withRouter(returnReasonList)